<template>
  <div>
     <h1>home</h1>
     <div class="avatar" v-if="userInfo.avatar">
       <img :src="userInfo.avatar" alt="">
       {{userInfo.name}}
     </div>
     <template v-for="item in arr">
       <span :key="item">{{item}}</span>
    </template>
     <template v-for="item in list">
      <ul :key="item.img" @click="handleImageClick">
          <li> <img v-lazy="item.img" alt=""> </li>
          <li> {{item.img}} </li>
      </ul>
     </template>
  </div>
</template>
<script>
import axios from 'axios'
// v-lazyload 图片懒加载
/**
 *  图片懒加载：
 * 图片。当用户需要看到图片的时候，才给用户加载 （视窗显示）
 *
 * 1. img src  v-lazy="item.img"
 * 2. 背景图片  v-lazy:background-image
 */
import { mapMutations, mapActions, mapState } from 'vuex'
export default {
  data() {
    return {
      list: [], // 在data中绑定数据 为什么？ objectdefineProperty
      obj: {
        info: 'info',
        address: 'address'
      },
      arr: ['上海','北京','广州']
    }
  },
  /**
   * vue2数据双向绑定原理：
   *  1. observer: Object.defineProperty 设置 get set
   *  2. watcher:  监听
   *  3. compiler: 编译
   *
   * 缺点：
   * 1. 对象新增属性监听不到，
   * 2. 直接操作数组，也不能监听到， 但是可以使用数组的方法（）  // vue数组方法被重写了，变异方法
   * 解决方案：
   *
   * 1. this.$set / Vue.$set
   * 2. 调用数组的变异方法
   * 3. updateforce
   * 4. 重写对象
   *
   * vue3数据双向绑定原理
   *  1. observer: proxy 设置 get set
   *  2. watcher:  监听
   *  3. compiler: 编译
   */
  mounted() {
    this.fetchData()
    const token = localStorage.getItem('token')
    console.log(token, 'token')
    this.GetUserInfo('token')
  },
  computed: {
    ...mapState(['userInfo'])
  },
  methods: {
    ...mapActions(['GetUserInfo']),
    ...mapMutations([
      'setInfo'
    ]),
    async fetchData() { // 声明 async 异步函数 返回一个promise函数
      const data = await axios.get('/data.json') // await 异步等待的 promise函数
      console.log('data.data:....:', data)
      data.data.forEach(v => {
        v.checked = false
        v.obj = {msg: 'msg', address: 'address', info: 'info'}
      })
      // this.obj.gender = '男'
      // 给对象新增属性添加 监听属性
      this.$set(this.obj, 'gender', '男')
      console.log(this.obj, 'obj')
      this.list = data.data
      console.log('this.list....:', this.list)
    },
    handleImageClick() {
      this.obj = {...this.obj, gender: 'nan'}
      console.log(this.obj, 'obj')
      // this.arr[0] = '操作'
      // this.arr.splice(0, 1, '操作')
      // console.log(this.arr, 'arr')  // vue数组方法被重写了，变异方法
      // this.$set(this.arr, 0, '操作')
      // this.setInfo('男')
    }
  },
}
</script>